<template>
  <div class="schedulePage">
    <header class="header">
      <span>{{ currentYear + "年" + currentMounth + "月" }}</span>
      <div class="month-controls">
        <span id="prev-month" class="sz_arrows_left" @click="prevMonth"></span>
        <span id="next-month" class="sz_arrows_right" @click="nextMonth"></span>
      </div>
    </header>
    <div class="calendar" id="calendar">
      <div class="days" id="days"></div>
    </div>
    <header class="header">
      <span
        :class="currentTab == 0 ? 'active' : ''"
        @click="selectSchedule(0)"
        style="margin-right: 20px; cursor: pointer"
        >全部日程</span
      >
      <span
        :class="currentTab == 1 ? 'active' : ''"
        @click="selectSchedule(1)"
        style="margin-right: 20px; cursor: pointer"
        >会议</span
      >
      <span
        :class="currentTab == 2 ? 'active' : ''"
        @click="selectSchedule(2)"
        style="margin-right: 20px; cursor: pointer"
        >事件</span
      >
      <span
        :class="currentTab == 3 ? 'active' : ''"
        @click="selectSchedule(3)"
        style="margin-right: 20px; cursor: pointer"
        >任务</span
      >
    </header>
    <div class="schedule-list">
      <div v-for="it in scheduleList" :key="it.type">
        <div
          class="schedule-item"
          @click="goToDetail()"
          v-for="item in it.eventInfo"
          :key="item.dbEndDate"
        >
          <p class="title">{{ item.title }}</p>
          <p class="des">
            <span class="time" :title="item.title">{{ item.dbStartDate }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentMounth: "",
      currentYear: "",
      currentDate: new Date(),
      selectDay: "",
      currentTab: 0,
      scheduleList: [], //日程数据
      moreLink: "",//更多链接
      appName:"会议,任务,事件"//接口参数
    };
  },
  mounted() {
    this.renderCalendar();
    this.getScheduleData();
  },
  methods: {
    // 获取日程数据
    getScheduleData() {
      this.axios({
        url: "/seeyon/rest/select/myTimeView",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          "token":localStorage.getItem("restToken"),
        },
        data: {
          loginName: localStorage.getItem("loginName"),
          appName: this.appName,
          startTime:this.selectDay==''? new Date().getFullYear() +  "-" + (new Date().getMonth()+1) +  "-" + new Date().getDate() : this.selectDay ,
          endTime:this.selectDay==''? new Date().getFullYear() +  "-" + (new Date().getMonth()+1) +  "-" + new Date().getDate() : this.selectDay,
        },
      }).then((res) => {
        console.log("获取日程数据", res);
        this.moreLink = res.data.data[res.data.data.length - 1].moreUrl;
        this.scheduleList = res.data.data;
        this.scheduleList.pop();
      });
    },
    goToDetail() {
      this.axios({
        url: `/seeyon/oasso.do?method=redirect&loginName=${localStorage.getItem("loginName")}&url=${encodeURIComponent("/seeyon" + this.moreLink)}`,
        method: "get",
        headers: {
          "Content-Type": "application/json",
        },
      }).then((res) => {
        console.log("点击新闻数据", res);
        window.open(res.data, "_blank");
      });
    },
    // 获取某月的天数
    getDaysInMonth(month, year) {
      return new Date(year, month, 0).getDate();
    },

    // 获取星期几
    getFirstDayOfMonth(month, year) {
      return new Date(year, month, 1).getDay();
    },

    // 更新日期显示
    renderCalendar() {
      const daysContainer = document.getElementById("days");
      const month = this.currentDate.getMonth();
      const year = this.currentDate.getFullYear();
      const daysInMonth = this.getDaysInMonth(month + 1, year);
      const firstDay = this.getFirstDayOfMonth(month, year);
      // this.selectDay = `${year}-${month + 1}-${this.currentDate.getDate()}`;
      // 更新月份显示
      const months = [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
      ];
      this.currentMounth = months[month];
      this.currentYear = year;

      // 清空日期容器
      daysContainer.innerHTML = "";
      // 添加星期标题
      const weekDays = ["日", "一", "二", "三", "四", "五", "六"];
      weekDays.forEach((day) => {
        const weekDayElement = document.createElement("div");
        weekDayElement.classList.add("day", "disabled");
        weekDayElement.textContent = day;
        daysContainer.appendChild(weekDayElement);
      });

      // 填充空白日期，直到第一个日期
      for (let i = 0; i < firstDay; i++) {
        const emptyDay = document.createElement("div");
        emptyDay.classList.add("day", "disabled");
        daysContainer.appendChild(emptyDay);
      }

      // 填充本月的日期
      for (let day = 1; day <= daysInMonth; day++) {
        const dayElement = document.createElement("div");
        dayElement.classList.add("day");
        if (year == new Date().getFullYear() && month == new Date().getMonth() && day == new Date().getDate()) {
          dayElement.classList.add("today");
        }
        if (this.selectDay == year + "-" + (month + 1) + "-" + day) {
          dayElement.classList.add("selectDay");
        }
        dayElement.textContent = day;
        dayElement.onclick = (e) => {
          this.selectDay = year + "-" + (month + 1) + "-" + day;
          document.querySelectorAll(".selectDay").forEach((day) => {
            day.className = "day";
          })
          e.target.className == "day today" ? e.target.className = "day today" : e.target.className = "day selectDay";
          this.selectDay = `${year}-${month + 1}-${day}`;
          this.getScheduleData();
          console.log("选择的日期", this.selectDay);
        };
        daysContainer.appendChild(dayElement);
      }
    },
    // 切换到上一月
    prevMonth() {
      this.currentDate.setMonth(this.currentDate.getMonth() - 1);
      this.renderCalendar();
    },
    // 切换到下一月
    nextMonth() {
      this.currentDate.setMonth(this.currentDate.getMonth() + 1);
      this.renderCalendar();
    },
    // 全部日程与今日日程切换
    selectSchedule(count) {
      this.currentTab = count;
      switch (count) {
        case 0:
          this.appName = "会议,任务,事件";
          break;
          case 1:
          this.appName = "会议";
          break;
          case 2:
          this.appName = "事件";
          break;
          case 3:
          this.appName = "任务";
          break;
      }
      this.getScheduleData();
    },
  },
};
</script>
<style lang="less" scoped>
.schedulePage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    font-weight: 600;
    font-size: 20px;
    line-height: 50px;
    position: relative;
    .month-controls {
      position: absolute;
      display: flex;
      justify-content: space-between;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      #prev-month {
        margin-right: 5px;
      }
    }
    .month-controls span {
      padding: 5px;
      cursor: pointer;
      background-color: #f5f8fb;
      color: #a1a2a4;
      border-radius: 4px;
      font-size: 14px;
    }
  }
  .calendar {
    display: inline-block;
    padding: 10px;
    text-align: center;
    width: 100%;
  }
  .schedule-list {
    flex: 1;
    overflow-y: auto;
    .schedule-item {
      padding: 10px 0px;
      border-bottom: 1px dashed #c0c6cc;
      cursor: pointer;
      .title {
        color: #37456e;
        line-height: 30px;
        font-weight: bold;
      }
      .des {
        color: #c0c6cc;
        line-height: 30px;
      }
    }
  }
}
</style>
<style>
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-top: 10px;
}
.day {
  padding: 10px;
  text-align: center;
  cursor: pointer;
}

.selectDay{
    background-color: #4b7bfd;
    color: #fff;
    border-radius: 6px;
}
.selectDay:hover {
  background-color: #4b7bfd !important;
}
.day:hover {
  background-color: #f0f0f0;
}
.today{
    background-color: #c8d2ed !important;
    color: #fff;
    border-radius: 6px;
}
.today:hover {
    background-color: #c8d2ed;
}
.disabled {
  color: #ccc;
  cursor: not-allowed;
}
.active {
  position: relative;
}
.active::before {
  position: absolute;
  content: "";
  width: 30px;
  height: 3px;
  background-color: #207efb;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
}
</style>